<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="../jquery/jquery-3.2.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.css">

</head>
<body>

<div class="container">

    <pre>
        <h3>
            BootStrap中面板可以分为以下几个部分：
            panel容器：也就是面板的最外层元素
            标题：可选(使用class="panel-heading")
            内容：可选(使用panel-body)
            脚注：可选(使用panel-footer)
        </h3>
    </pre>
    <h4>基础应用</h4>
    <div class="panel panel-default">
        <div class="panel-body">
            吉特仓库系统是一个一bootStrap为前端框架的智能化仓库管理软件。

        </div>
    </div>

    <h4>面板的标题和脚注</h4>
    <div class="panel panel-default">
        <div class="panel-heading">Panel-heading</div>
        <div class="panel-body">
            吉特仓库系统是一个一bootStrap为前端框架的智能化仓库管理软件。
        </div>
        <div class="panel-footer">Panel-footer</div>
    </div>

    <h4>
        <pre>
            基础样式
            panel-primary:重点蓝
            panel-success:成功蓝
            panel-info:信息蓝
            panel-warning:警告黄
            panel-danger:危险红
        </pre>
    </h4>
    <div class="row">
        <div class="col-lg-2">
            <div class="panel panel-default">
                <div class="panel-heading">BootStrap标题</div>
                <div class="panel-body">吉特仓库系统是一个一bootStrap为前端框架的智能化仓库管理软件。</div>
                <div class="panel-footer">智能机器人</div>
            </div>
        </div>
        <div class="col-lg-2">
            <div class="panel panel-primary">
                <div class="panel-heading">BootStrap标题</div>
                <div class="panel-body">吉特仓库系统是一个一bootStrap为前端框架的智能化仓库管理软件。</div>
                <div class="panel-footer">智能机器人</div>
            </div>
        </div>
        <div class="col-lg-2">
            <div class="panel panel-success">
                <div class="panel-heading">BootStrap标题</div>
                <div class="panel-body">吉特仓库系统是一个一bootStrap为前端框架的智能化仓库管理软件。</div>
                <div class="panel-footer">智能机器人</div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-2">
            <div class="panel panel-info">
                <div class="panel-heading">BootStrap标题</div>
                <div class="panel-body">吉特仓库系统是一个一bootStrap为前端框架的智能化仓库管理软件。</div>
                <div class="panel-footer">智能机器人</div>
            </div>
        </div>
        <div class="col-lg-2">
            <div class="panel panel-warning">
                <div class="panel-heading">BootStrap标题</div>
                <div class="panel-body">吉特仓库系统是一个一bootStrap为前端框架的智能化仓库管理软件。</div>
                <div class="panel-footer">智能机器人</div>
            </div>
        </div>
        <div class="col-lg-2">
            <div class="panel panel-danger">
                <div class="panel-heading">BootStrap标题</div>
                <div class="panel-body">吉特仓库系统是一个一bootStrap为前端框架的智能化仓库管理软件。</div>
                <div class="panel-footer">智能机器人</div>
            </div>
        </div>
    </div>

    <h4>嵌套表格</h4>
    <div class="panel panel-default">
        <div class="panel-heading">BootStrap标题</div>
        <div class="panel-body">
            吉特仓库系统是一个一bootStrap为前端框架的智能化仓库管理软件。
            <table class="table table-bordered table-hover">
                <thead>
                    <tr>
                        <th>入库单号</th>
                        <th>供应商</th>
                        <th>入库时间</th>
                        <th>产品</th>
                        <th>数量</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>201505050</td>
                        <td>天极物流</td>
                        <td>2014-07-10</td>
                        <td>电子芯片</td>
                        <td>100cps</td>
                    </tr>
                    <tr>
                        <td>201505050</td>
                        <td>天极物流</td>
                        <td>2014-07-10</td>
                        <td>电子芯片</td>
                        <td>100cps</td>
                    </tr>
                    <tr>
                        <td>201505050</td>
                        <td>天极物流</td>
                        <td>2014-07-10</td>
                        <td>电子芯片</td>
                        <td>100cps</td>
                    </tr><tr>
                        <td>201505050</td>
                        <td>天极物流</td>
                        <td>2014-07-10</td>
                        <td>电子芯片</td>
                        <td>100cps</td>
                    </tr><tr>
                        <td>201505050</td>
                        <td>天极物流</td>
                        <td>2014-07-10</td>
                        <td>电子芯片</td>
                        <td>100cps</td>
                    </tr>


                </tbody>
            </table>
        </div>
        <div class="panel-footer">智能机器人</div>
    </div>

    <h3>嵌套列表</h3>
    <div class="panel panel-default">
        <div class="panel-heading">BootStrap标题</div>
        <div class="panel-body">
            吉特仓库系统是一个一bootStrap为前端框架的智能化仓库管理软件。
            <ul class="list-group">
                <li class="list-group-item">入库管理</li>
                <li class="list-group-item">出库管理</li>
                <li class="list-group-item">盘点管理</li>
            </ul>
        </div>
        <div class="panel-footer">智能机器人</div>
    </div>

</div>
</body>
</html>